<template>
  <div>
  <div class="basic-box">
    <div class="header">
      <div class="left">
        <el-image class="cover" :src="'http://193.112.128.94:7001'+ userDetail.avatar" style="width: 200px;height: 200px; margin: 20px" />
      </div>
      <div class="mid" style="margin-top: 20px">
        <div v-for="(item,index) in userMap" :key="index">
          <div class="cell">
            <div class="title">
              {{item.title}} :&nbsp;
            </div>
            <div class="content">
              {{userDetail[item.key]}}
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
    <div class="basic-box">
      <div class="summary">
        <div class="summary-title">借书记录</div>
        <div class="summary-content">
          <el-table ref="table" :data="tableData">
            <el-table-column prop="id" label="借书id" min-width="150" align="center" />
            <el-table-column prop="isbn" label="isbn" min-width="150" align="center" />
            <el-table-column prop="name" label="书籍名称" min-width="150" align="center" />
            <el-table-column prop="borrow" label="借书时间" min-width="150" align="center" />
            <el-table-column prop="return" label="最迟归还时间" min-width="150" align="center" />
<!--            <el-table-column prop="" label="归还状态" min-width="150" align="center" />-->
            <el-table-column label="操作" width="200" align="center" fixed="right">
              <template slot-scope="scope">
<!--                <el-button class="action-button" type="primary" size="small" @click="toDetail(scope.row)">查看</el-button>-->
<!--                <el-button class="action-button" type="success" size="small" @click="toEdit(scope.$index)">还书</el-button>-->
                <el-button class="action-button" type="danger" size="small" @click="toDelete(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <el-dialog title="确定用户已还将无法撤销" :visible.sync="isEditMode" width="20%" center>
      <!--      <span>-->
      <!--        <el-select v-model="editValue" placeholder="请选择修改后状态" style="width: 100%">-->
      <!--          <el-option v-for="item in borrowStatus" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
      <!--        </el-select>-->
      <!--      </span>-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="isEditMode = false">取 消</el-button>
        <el-button type="primary" @click="confirmEdit">确定还书</el-button>
      </span>
    </el-dialog>
    <div class="pagination">
      <!--      <span class="demonstration">直接前往</span>-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalData">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import { getUserRecord , getUserRecordTotal,returnBook , deleteRecord} from '@/api/book.js'
  import {  getUserDetail } from '@/api/user.js'
  import { Message } from 'element-ui'
  import { DateFomatter } from '@/utils/timeFomater'
  export default {
    name: 'userDetail',
    data() {
      return {
        uid:0,
        page: 1,
        size: 5,
        totalData:0,
        isEditMode:false,
        editValue: '',
        userDetail:{
          // "phone" : "13751706464",
          // "username" : "user",
          // "address" : "test address",
          // "avatar" :"http://img5.imgtn.bdimg.com/it/u=1962519321,749854898&fm=26&gp=0.jpg"
        },

        editData:{

        },
        userMap: [
          { key: "username", title: "用户名" },
          { key: "phone", title: "手机号" },
          { key: "address", title: "地址" },
        ],
        tableData: [],
        borrowStatus:[
          { value: '0', label: '未归还' },
          { value: '1', label: '已归还' },
        ],

      }
    },
    mounted() {
      // console.log(this.$route.query.id)
      this.id = this.$route.query.id
      this.getTableData()
    },
    methods: {
      toEditMode(){
        this.isEditMode = true
        this.editData = this.bookDetail
      },
      destroyDialog(){
        this.editData = {}
        this.isEditMode = false
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);

        this.size = Number(`${val}`)
        this.page = Number(1)
        this.getTableData()

      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page = Number(`${val}`)
        this.getTableData()
      },
      toEdit(index) {
        this.editId = this.tableData[index].id
        // this.editValue = this.tableData[index]
        this.isEditMode = true
      },
      toDelete(index){
        var form = { id: Number(this.tableData[index].id)}
        console.log(form)
        deleteRecord(form).then(
          (res) => {
            console.log(res)
            if(res.status === 200){
              Message({
                message: res.message,
                type: 'success',
                duration: 5 * 1000
              })
              setTimeout(res =>{
                window.location.reload()
              },500)
            }

          });
        //    发送表单
      },
      confirmEdit() {
        var form = { id: this.editId}
        this.editValue = ''
        this.editId = ''
        console.log(form)
        this.isEditMode = false
        //    发送表单
        returnBook(form).then(
          res =>{
            console.log(res)
            if(res.status === 200)
              Message({
                message: '操作成功',
                type: 'error',
                duration: 5 * 1000
              })
          }
        )
      },
      getTableData() {
        getUserDetail({id:this.id }).then(
          res=>{

            this.userDetail = res.data.detail
            console.log(this.userDetail)
          }
        )
        getUserRecordTotal(this.id).then(
          res =>{
            this.totalData = res.data.count
          }
        )
        getUserRecord(this.page,this.size,this.id).then(
          res => {
            var tableData = res.data.list
            console.log(tableData)
            console.log(tableData)
            for(var i = 0;i < tableData.length;i++){
              tableData[i].borrow = DateFomatter(tableData[i].borrow,'yyyy-MM-dd')
              tableData[i].return  = DateFomatter(tableData[i].borrow,'yyyy-MM-dd')
              if(tableData[i].state)
                tableData[i].state = this.borrowStatus[1].label
              else
                tableData[i].state = this.borrowStatus[0].label
            }
            this.tableData = tableData
          }
        )
      }
    }
  }
</script>

<style scoped lang="less">
  .basic-box{
    margin: 40px;
    padding: 20px;
    border-radius: 10px;
    width: 80%;
  }
  .header{
    display: flex;
    flex-direction: row;
    .left{
      /*width: 20%;*/
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .cover{
        border-radius: 10px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
      }
    }
    .mid{
      /*width: 50%;*/
    }
    .right{
      /*width: 20%;*/
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      margin-right: 20px;
      /*justify-content: flex-end;*/
    }
  }
  .cell{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin:10px;
    .title{
      font-size: 20px;
      font-weight:800;
      color: #11A983;
    }
    .title-edit{
      font-size: 20px;
      font-weight:800;
      color: #11A983;
      width: 150px;
    }
    .content{
      font-size: 20px;
      font-weight: 500;
    }
  }
  .summary{
    margin: 30px 40px;
    width: 90%;
    .summary-title{
      font-size: 25px;
      color: #2c3e50;
      font-weight: bolder;
    }
    .summary-content{
      margin-top: 20px;
      font-size: 20px;
    }
  }
  .pagination{
    margin: 30px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items:center;
    justify-content: center;
  }
</style>
